// 导致组件结构偏移
// import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
// Pinia插件的数据持久化
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import App from './App.vue'
import router from './router'

// 引入初始化的样式文件
import '@/styles/common.scss'

// 全局指令注册
// 引入懒加载指令插件并且注册
import { lazyPlugin } from '@/directives'

// 引入全局组件插件
import { componentPlugin } from "@/components";




// // 定义懒加载插件
// import { useIntersectionObserver } from '@vueuse/core'

// // 测试接口函数
// import { getCategoryAPI } from '@/apis/testAPI'
// getCategoryAPI().then(res => {
//     console.log(res);
// })

const app = createApp(App)

const pinia = createPinia()
// 注册持久化插件
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.use(router)

app.mount('#app')

app.use(lazyPlugin)
app.use(componentPlugin)



// // 定义全局指令
// app.directive('img-lazy', {
//     mounted(el, binding) {
//         // el:指令绑定的那个元素 img
//         // binding: binding.value 指令等于号后面绑定的表达式的值 图片url
//         console.log(el, binding.value)
//         const { stop } = useIntersectionObserver(
//             el,
//             ([{ isIntersecting }]) => {
//                 console.log(isIntersecting) // true | false
//                 if (isIntersecting) {
//                     // 进入视口区域
//                     el.src = binding.value
//                     stop()
//                 }
//             },
//         )
//     }
// })

